<script setup>
import { message } from "ant-design-vue";
import { UserOutlined } from "@ant-design/icons-vue";
import axios from "axios";

const route = useRoute();
// 获取用户信息
const userInfo = ref( {
  username : '',
  nickname : '',
  age : '',
  avatar : '',
  address : '',
  area_list : [],
  tags_list : [],
  remark : '',
  create_time : '',
  is_test : '',
  account : '',
  last_login_ip : '',
  last_login_time : '',
} );
const getInfo = ( id ) => {
  axios.get( '/api/user-info?id=' + id ).then( res => {
    if ( res.data.code !== 200 ) {
      message.error( res.data.msg );
    } else {
      userInfo.value = res.data.data;
    }
  } ).catch( err => {
    console.log( err );
    message.error( '请求失败' );
  } );
}

// 获取状态列表
const stateOptions = ref( [
  { label : '正常', value : 1, status : 'processing' },
  { label : '风控', value : 0, status : 'warning' },
  { label : '限制', value : 2, status : 'error' },
] );

// 挂载时获取数据
onMounted( () => {
  if ( route.query.id ) {
    getInfo( route.query.id )
  } else {
    message.error( '参数错误' );
  }
} );
</script>


<template>
  <div>
    <a-descriptions :title="userInfo.username" size="small" bordered>
      <a-descriptions-item label="昵称" :label-style="{width: '180px'}">
        <a-avatar v-if="userInfo.avatar" :src="userInfo.avatar"></a-avatar>
        <a-avatar v-else :style="{backgroundColor: '#87d068'}">
          <user-outlined></user-outlined>
        </a-avatar>
        {{ userInfo.nickname }}
      </a-descriptions-item>
      <a-descriptions-item label="手机号">{{ userInfo.username }}</a-descriptions-item>
      <a-descriptions-item label="年龄">{{ userInfo.age }}岁</a-descriptions-item>
      
      <a-descriptions-item label="注册时间">{{ userInfo.create_time }}</a-descriptions-item>
      <a-descriptions-item label="家庭住址" :span="2">
        <a-tag v-for="(item, index) in userInfo.area_list" :key="index">{{ item }}</a-tag>
        <a-tag color="green">{{ userInfo.address }}</a-tag>
      </a-descriptions-item>
      
      <a-descriptions-item label="用户状态">
        <template v-for="item in stateOptions">
          <a-badge v-if="userInfo.state === item.value" :status="item.status" :text="item.label"/>
        </template>
      </a-descriptions-item>
      <a-descriptions-item label="注册时间">{{ userInfo.create_time }}</a-descriptions-item>
      <a-descriptions-item label="是否测试用户">
        <a-tag color="red" v-if="userInfo.is_test === 1">是</a-tag>
        <a-tag color="green" v-else>否</a-tag>
      </a-descriptions-item>
      
      <a-descriptions-item label="账户余额">{{ userInfo.account }}</a-descriptions-item>
      <a-descriptions-item label="最后登录时间及IP">
        {{ userInfo.last_login_ip }}
        <br/>
        {{ userInfo.last_login_time }}
      </a-descriptions-item>
      <a-descriptions-item label="用户标签">
        <a-tag v-for="(item, index) in userInfo.tags_list" :key="index">{{ item }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="备注" :span="3">
        {{ userInfo.remark }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<style scoped>

</style>